﻿@import "../variables";

.msacademic .author { 
	padding-top: 50px;


	.picture															{ margin-top: 10px; width: 150px; height: 150px; padding: 5px; border-radius: 999px; float: left;
																		  -webkit-box-shadow:  0px 0px 5px 2px rgba(0, 0, 0, 0.2); box-shadow:  0px 0px 5px 2px rgba(0, 0, 0, 0.2); }
	.picture img														{ width: 150px; height: 150px; border-radius: 999px; }

	.info { 
		float: left; width: 940px; padding-left: 40px; 
		
		h1																{ padding: 10px 0 20px 0; color: @orange-base; .segoeUILight_font_family; font-weight: lighter; font-size: 56px;}
		.description													{ padding: 10px 0;  font-size: 21px; line-height: 28px; font-weight: lighter; .segoeUILight_font_family; }
		hr																{ border: 0; border-top: 1px solid lighten(@border-base-color, 10%); margin: 10px 0; }
	}

	.social ul li { 
		display: inline-block; padding-right: 25px; font-size: 14px; 

		&.fb a															{ color: #287dba; }
		&.fb a:hover													{ color: darken(#287dba, 10%); }
		&.tw a															{ color: #00aeef; }
		&.tw a:hover													{ color: darken(#00aeef, 10%); }
		&.ln a															{ color: #333333; }
		&.ln a:hover													{ color: darken(#333333, 10%); }
		&.mail a														{ color: #5e5e5e; }
		&.mail a:hover													{ color: darken(#5e5e5e, 10%); }
		&.empty-socials													{ color: #b3b3b3; }
	}

	.articles { 
		padding: 25px 0; 
		h2																{ color:lighten(@grey-base, 10%); font-size: 25px; line-height: 32px; .segoeUILight_font_family; font-weight: lighter; 
																		  padding-bottom: 60px; }
		h2 span															{ float: right; font-size: 14px; }
		h2 span b														{ color: @orange-base; }
		.item															{ float: left; width: 313px; height: 300px; }
		.item .wrap														{ padding: 0px 40px 0 0;  }
		.item .article-picture											{ height: 135px; max-width: 293px; overflow: hidden; }
		.item .article-picture img										{ max-width: 100%; }
		.item h3														{ color: @grey-base; font-size: 21px; line-height: 27px; .segoeUILight_font_family; font-weight: lighter; 
																		  padding: 15px 0 5px 0; }
		.item a:hover h3												{ color: @orange-base; }
	}


}

/* Responsive design
==================================================== */
@media all and (max-width: 1600px) {
	.msacademic .author	{ 
		padding-top: 15px; 

		.picture														{ width: 100px; height: 100px; }
		.picture img													{ width: 100px; height: 100px; }

		.info															{ width: 830px;}
		.info h1														{ font-size: 44px;}
		.info .description												{ font-size: 18px; line-height: 23px;}
		.social ul li													{ font-size: 11px; }

		.articles h2													{ font-size: 21px; padding-bottom: 45px; }
		.articles .item													{ width: 276px; }
		.articles .item h3												{ font-size: 17px; line-height: 23px; }
	}
}
@media all and (max-width: 1024px) {
    .msacademic .author { 

		.social ul li													{ padding: 5px 14px 5px 0; }

		.picture														{ width: 50px; height: 50px; }
		.picture img													{ width: 50px; height: 50px; }
		
		.info															{ width: 80%; padding: 0 0 0 7%;}
		.info h1														{ font-size: 32px;}
		.info .description												{ font-size: 15px; line-height: 20px;}
		
		.articles h2 span												{ float: none; display: block;}		
		.articles .item													{ width: 100%; clear: both; height: auto; padding-bottom: 10%;  }
		.articles .item .wrap											{ padding: 0 0 0 0; }
		.articles .item h3												{ font-size: 17px; line-height: 20px; padding: 0; }
		.articles .item .article-picture								{ height: auto; width: 25%; padding-right: 5%; float: left; }

    }
}

@media all and (max-width: 600px) {
    .msacademic .author {

        .picture														{ display: none; }
		
		.info h1														{ font-size: 27px; padding: 0 0 0 0;}
		
		.articles h2													{ font-size: 18px; }
		.articles h2 span												{ font-size: 14px; }
    }
}